<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!--<head>-->

<!--<meta charset="utf-8">-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--<title>住户列表</title>-->

<head th:include="common/head :: head('角色列表')"></head>
<link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
      th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>

<link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
      rel="stylesheet">
<!-- Morris -->
<link href="../../resource/css/plugins/morris/morris-0.4.3.min.css"
      th:href="@{/resource/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">

<link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>

<link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
      rel="stylesheet">
<link href="../../resource/hotui/css/hotui.style.override.css"
      th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>

<link href="../../resource/hotui/css/switchery.min.css"
      th:href="@{/resource/hotui/css/switchery.min.css}" rel="stylesheet"/>

<link href="../../resource/lib/bootstrap-daterangepicker/daterangepicker.min.css"
      th:href="@{/resource/lib/bootstrap-daterangepicker/daterangepicker.min.css}" rel="stylesheet">

<link href="../../resource/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css"
      th:href="@{/resource/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css}" rel="stylesheet"/>

<link href="../../resource/hotui/css/awesome-bootstrap-checkbox.min.css"
      th:href="@{/resource/hotui/css/awesome-bootstrap-checkbox.min.css}"
      rel="stylesheet">

<!--<style type="text/css">-->
<!--.hr-line-dashed {-->
<!--margin: 10px 0;-->
<!--height: 1px;-->
<!--border-top: 1px dashed #e7eaec;-->
<!--background-color: #fff;-->
<!--color: #fff;-->
<!--}-->

<!--.city-picker-selector select {-->

<!--}-->

<!--.nav-tabs input {-->
<!--width: 20px;-->
<!--height: 23px;-->
<!--}-->
<!--</style>-->
<!--</head>-->

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight tooltip-demo">
    <!--search-->
    <form role="form" id="searchForm" class="search-panel" method="get" th:object="${condition}">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <div class="form-inline">
                            <input type="hidden" th:value="${pageIndex}" name="pageIndex"/>
                            <input type="hidden" th:value="*{orgId}" name="orgId" id="orgId"/>
                            <div class="form-group m-r-sm">
                                <label class="control-label">工号：</label>
                                <input type="text" class="form-control input-sm mb10" id="workNo" name="workNo"
                                       th:value="*{workNo}"
                                       placeholder=""/>
                                <label class="control-label">姓名：</label>
                                <input type="text" class="form-control input-sm mb10" id="name" name="name"
                                       th:value="*{name}"
                                       placeholder=""/>
                                <label class="control-label">卡号：</label>
                                <input type="text" class="form-control input-sm mb10" id="cardNo" name="cardNo"
                                       th:value="*{cardNo}"
                                       placeholder=""/>
                            </div>
                            <div style="float: right;">
                                <button type="button" class="btn btn-success" onclick="jsHelper.search()">筛选</button>
                                <button type="button" class="btn btn-success" onclick="jsHelper.searchAll()">显示全部
                                </button>
                                <button type="button" class="btn btn-success" onclick="jsHelper.setResident()">添加
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!--search-->

    <!--list-->
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins m-b-none">
                <div class="tabs-container">
                    <div class="tab-content">
                        <div class="tab-pane active">
                            <div class="panel-body">
                                <table class="table table-bordered table-hover table-center">
                                    <tr>
                                        <th>序号</th>
                                        <th>工号</th>
                                        <th>姓名</th>
                                        <th>手机号</th>
                                        <th>年龄</th>
                                        <th>性别</th>
                                        <th>部门</th>
                                        <th>持有卡号</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr th:each="worker,index:${workers}">
                                        <td th:text="${index.index+1}"></td>
                                        <td th:text="${worker.workNo}"></td>
                                        <td>
                                            <span th:text="${worker.user.name}"></span>
                                        </td>
                                        <td>
                                            <span th:text="${worker.user.mobile}"></span>
                                        </td>
                                        <td>
                                            <span th:text="${worker.user.age}"></span>
                                        </td>
                                        <td>
                                            <span th:text="${worker.user.sex==1?'男':'女'}"></span>
                                        </td>
                                        <td>
                                            <span th:text="${worker.organization.name}"></span>
                                        </td>
                                        <td>
                                            <span th:text="${worker.user.card==null?'':worker.user.card.cardNo}"></span>
                                        </td>
                                        <td>
                                            <button th:onclick="jsHelper.setResident([[${worker.workNo}]],[[${worker.workId}]],[[${worker.user.name}]],
                                            [[${worker.user.age}]],[[${worker.user.sex}]],[[${worker.user.card==null?'':worker.user.card.cardNo}]],[[${worker.user.mobile}]],[[${worker.steward}]])"
                                                    type="button"
                                                    class="btn btn-info btn-xs m-b-none">编辑
                                            </button>
                                            <button th:if="${worker.user.card!=null}"
                                                    th:onclick="jsHelper.unbinding([[${worker.user.card.cardNo}]])"
                                                    type="button"
                                                    class="btn btn-danger btn-xs m-b-none">解绑
                                            </button>
                                            <button
                                                    th:onclick="relHelper.setRel([[${worker.workId}]])"
                                                    type="button"
                                                    class="btn btn-danger btn-xs m-b-none">管理楼层
                                            </button>
                                            <button
                                                    th:onclick="jsHelper.del([[${worker.user.userId}]])"
                                                    type="button"
                                                    class="btn btn-danger btn-xs m-b-none">删除
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                                <p style="float: left; margin: 20px 0;">
                                    共<span th:text="${totalRecords}"></span>条记录，当前第<span th:text="${pageIndex}"></span>/<span
                                        th:text="${totalPages==0?1:totalPages}"></span>，每页20条记录
                                </p>
                                <ul style="float: right;" class="pagination pagination-split">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="set_resident_modal" class="modal-content-tag">
    <form id="residentModelForm">
        <div class="form-group">
            <label class="col-sm-5 control-label">工号：</label>
            <div class="col-sm-6">
                <input id="workerModelNo" type="text" class="form-control" name="workerModelNo">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">姓名：</label>
            <div class="col-sm-6">
                <input id="workerModelId" name="workerModelId" minlength="2" type="hidden" class="form-control"
                       value="0">
                <input id="workerModelName" type="text" class="form-control" name="workerModelName">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">手机号：</label>
            <div class="col-sm-6">
                <input id="workerModelMobile" type="text" class="form-control" name="workerModelMobile">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">年龄：</label>
            <div class="col-sm-6">
                <input id="workerModelAge" type="number" class="form-control" name="workerModelAge">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">性别：</label>
            <div class="col-sm-6">
                <select class="form-control m-b" name="workerModelSex" id="workerModelSex">
                    <option value="0">女</option>
                    <option value="1">男</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">是否管家：</label>
            <div class="col-sm-6">
                <select class="form-control m-b" name="steward" id="steward">
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">持有卡：</label>
            <div class="col-sm-6">
                <input id="workerModelCard" type="text" class="form-control" name="workerModelCard">
            </div>
        </div>
    </form>
</div>

<div id="set_rel_modal" class="modal-content-tag">
    <div class="modal-dialog">
        <!--<div class="modal-content animated flipInY">-->
            <input id="relId_menu" name="roleId_menu" type="hidden" class="form-control">
            <div class="modal-body" id="relList"
                 style="weight:400px;max-height: 400px;position: relative;overflow: auto;">

            <!--</div>-->
        </div>
    </div>
</div>

<script type="text/html" id="rel_template">
    <ol class="dd-list">
        <li class="dd-item" data-id="{itemCode}">
            {collapse_expand}
            <div class="dd-handle">
                <input type="checkbox" value="{itemCode}" id="i-checks-{itemCode}" class="i-checks" {checked}>
                <span class="label label-info" style="margin-right: 10px;"></span>{itemName}
            </div>
            {childMenus}
        </li>
    </ol>
</script>


<footer th:include="common/footer::js"/>

<!--基础框架js-->
<!--<script src="../../resource/js/jquery.min.js" th:src="@{/resource/js/jquery.min.js?20190316}"></script>-->
<!--<script src="../../resource/js/bootstrap.min.js" th:src="@{/resource/js/bootstrap.min.js?20190316}"></script>-->

<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316?1234567"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316(123)}"></script>
<!--<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>-->

<!--<script src="../../resource/hotui/js/plugins/datetimepick/js/moment.min.js"-->
<!--th:src="@{/resource/hotui/js/plugins/datetimepick/js/moment.min.js}"></script>-->

<!--<script src="../../resource/hotui/js/plugins/datetimepick/js/daterangepicker.js"-->
<!--th:src="@{/resource/hotui/js/plugins/datetimepick/js/daterangepicker.js}"></script>-->

<!--<script src="../../resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"-->
<!--th:src="@{/resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>-->
<!--<script src="../../resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js"-->
<!--th:src="@{/resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js}"></script>-->

<script src="../../resource/js/switchery.min.js" th:src="@{/resource/js/switchery.min.js}"></script>
<script src="../../resource/js/plugins/validate/jquery.validate.min.js"
        th:src="@{/resource/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="../../resource/js/plugins/validate/messages_zh.min.js"
        th:src="@{/resource/js/plugins/validate/messages_zh.min.js}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-validate.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-validate.js}"></script>

<script type="text/javascript" th:inline="javascript">
    const pageIndex = /*[[${pageIndex}]]*/  1;
    const totalPages = /*[[${totalPages}]]*/  0;
    const pageUri = /*[[@{/resident/worker/list}]]*/  "";
    const equipmentApiBase = /*[[@{/resident}]]*/  "/resident";
</script>

<script>
    $(function () {
        //初始化分页
        var pageinate = new hot.paging(".pagination", pageIndex, totalPages, 7);

        pageinate.init(function (p) {
            jsHelper.search(p);
        });
        $(document).keyup(function (event) {
            if (event.keyCode == 13) {
                $(".searchBtn").trigger("click");
            }
        });

        $("input[name=chkAll]").change(function () {
            if ($(this).prop("checked")) {
                $("input[name=chkUser]").prop("checked", "checked");
            } else {
                $("input[name=chkUser]").removeAttr("checked");
            }
        });
        jsHelper.init();
        relHelper.initStr();
    });

    var setResidentModel = $("#set_resident_modal").modal("工作人员", function () {
        $("#residentModelForm").submit();
    });

    var jsHelper = {
        init: function () {
        },
        search: function (pageIndex) {
            $("input[name=pageIndex]").val(pageIndex);
            $("#searchForm").submit();
        },
        searchAll: function () {

            window.location.href = pageUri + "?orgId=" + $("#orgId").val();
        },
        unbinding: function (cardNo) {
            hot.confirm("确定要解除绑定吗？", function () {
                var requestData = {
                    cardNo: cardNo,
                };
                hot.ajax(equipmentApiBase + "/unbinding", requestData, function (apiResult) {
                    if (apiResult.resultCode === 2000) {
                        setResidentModel.hide(function () {
                            hot.tip.success("解绑成功");
                            window.location.reload();
                        });
                    } else {
                        hot.tip.error("解绑失败--" + apiResult.resultMsg);
                    }
                }, function () {
                }, "post", 300);
            });
        },
        del: function (userId) {
            hot.confirm("确定要删除该用户吗？", function () {
                var requestData = {
                    userId: userId,
                };
                hot.ajax(equipmentApiBase + "/del", requestData, function (apiResult) {
                    if (apiResult.resultCode === 2000) {
                        setResidentModel.hide(function () {
                            hot.tip.success("删除成功");
                            window.location.reload();
                        });
                    } else {
                        hot.tip.error("删除失败--" + apiResult.resultMsg);
                    }
                }, function () {
                }, "post", 300);
            });
        },
        setResident: function (workNo, id, name, age, sex, cardNo, mobile,steward) {
            setResidentModel.show(function () {
                if (id != null) {
                    $("#workerModelNo").val(workNo);
                    $("#workerModelId").val(id);
                    $("#workerModelName").val(name);
                    $("#workerModelAge").val(age);
                    $("#workerModelSex").val(sex);
                    $("#workerModelCard").val(cardNo);
                    $("#workerModelMobile").val(mobile);
                    if(steward){
                        $("#steward").val(1);
                    }else{
                        $("#steward").val(0);
                    }

                }
                $("#residentModelForm").validateCallback(function () {
                    var requestData = {
                        userId: $("#workerModelId").val(),
                        name: $("#workerModelName").val(),
                        sex: $("#workerModelSex").val(),
                        age: $("#workerModelAge").val(),
                        workNo: $("#workerModelNo").val(),
                        cardNo: $("#workerModelCard").val(),
                        orgId: $("#orgId").val(),
                        mobile: $("#workerModelMobile").val(),
                        steward: $("#steward").val(),
                    };

                    hot.ajax(equipmentApiBase + "/save/worker", requestData, function (apiResult) {
                        if (apiResult.resultCode === 2000) {
                            setResidentModel.hide(function () {
                                hot.tip.success("操作成功");
                                window.location.reload();
                            });
                        } else {
                            hot.tip.error("操作失败--" + apiResult.resultMsg);
                        }
                    }, function () {
                    }, "post", 300);
                })
            });
        },
    };

    var setRelModel = $("#set_rel_modal").modal("管理楼层", function () {
        relHelper.btnSubmitPower();
    });
    var test = "";
    var relHelper = {
        strIds: "",
        strList: [],
        relTemplate: $("#rel_template").html(),
        setRel: function (workId) {
            setRelModel.show(function () {
                $("#relId_menu").val(workId);
                test = relHelper.getModel(workId);
                relHelper.setPower();
            });
        },
        //初始化楼层树
        initStr: function () {
            var self = this;
            hotUtil.loading.show();
            hotUtil.ajaxCall("/resident/structure/tree/data", null, function (ret) {
                hotUtil.loading.close();
                if (ret.resultCode === 2000) {
                    self.strList = ret.data;
                }
            });
        },
        getChildMenu: function (strId, strList) {
            var resultList = [];
            $.each(strList, function (o, item) {
                if (item.pstrId === strId) {
                    resultList.push(item);
                }
            });
            return resultList;
        },
        outputChild: function (itemParentCode, strIds, strList) {
            var self = this;
            var data = self.getChildMenu(itemParentCode, strList);
            var appendHtml = "";
            $.each(data, function (o, item) {
                var tempHtml = self.relTemplate;
                if (strIds.indexOf("|" + item.strId + "|") >= 0)
                    tempHtml = tempHtml.replace(/{checked}/gm, "checked=\"checked\"");
                else
                    tempHtml = tempHtml.replace(/{checked}/gm, "");
                tempHtml = tempHtml.replace(/{itemName}/gm, item.text);
                tempHtml = tempHtml.replace(/{itemCode}/gm, item.strId);
                var itemChildCount = item.nodes == null ? 0 : item.nodes.length;
                if (itemChildCount > 0) {
                    tempHtml = tempHtml.replace(/{childMenus}/, self.outputChild(item.strId, strIds, item.nodes));
                    tempHtml = tempHtml.replace(/{collapse_expand}/, "<button  onclick=\"relHelper.collapse(this)\" data-action=\"collapse\" type=\"button\" style=\"display: block;\">关闭</button><button onclick=\"relHelper.expand(this)\" data-action=\"expand\" type=\"button\" style=\"display: none;\">展开</button>");
                }
                else {
                    tempHtml = tempHtml.replace(/{childMenus}/, "");
                    tempHtml = tempHtml.replace(/{collapse_expand}/, "");
                }
                appendHtml += tempHtml;
            });
            return appendHtml;
        },

        //设置管理楼层
        setPower: function () {
            var self = this;
            var data = test;
            if (data != null)
                self.authority = data;
            if (self.authority == null)
                self.authority = "";
            var appendHtml = this.outputChild(0, self.authority, this.strList);
            $("#relList").html(appendHtml);
            $(".i-checks").iCheck({
                checkboxClass: "icheckbox_square-green",
                radioClass: "iradio_square-green",
            });
            $('.i-checks').on('ifChecked', function (event) {
                var itemCode = parseInt($(this).val());
                if (self.authority.indexOf("|" + itemCode + "|") < 0) {
                    self.authority += ("|" + itemCode + "|");
                    self.authority = self.authority.replace("||", "|");
                }
            });
            $('.i-checks').on('ifUnchecked', function (event) {
                var itemCode = parseInt($(this).val());
                if (self.authority.indexOf("|" + itemCode + "|") >= 0) {
                    self.authority = self.authority.replaceAll("|" + itemCode + "|", "|");
                }
            });
        },

        getModel: function (relId) {
            var result = null;
            var requestData = {
                relId: relId,
            };
            $.ajax({
                type: "post",
                url: "/resident/rel/list",
                async: false,  //使用同步的方式,true为异步方式
                data: requestData,
                dataType: "json",
                success: function (data) {
                    if (data.resultCode === 2000) {
                        result = data.data;
                    }
                }
            });
            return result;
        },
        expand: function (obj) {
            $(obj).parent().children(".dd-list").show();
            $(obj).parent().children("button").show();
            $(obj).hide();
        }
        ,

        collapse: function (obj) {
            $(obj).parent().children(".dd-list").hide();
            $(obj).parent().children("button").show();
            $(obj).hide();

        }
        ,
        btnSubmitPower: function () {
            var self = this;
            if (hotUtil.isNullOrEmpty(self.authority) || self.authority.length <= 1) {
                hot.tip.error("请勾选楼层", "", "warning");
                return;
            }
            var param = {
                relId: parseInt($.trim($("#relId_menu").val())),
                strIds: self.authority
            };
            hotUtil.ajaxCall("/resident/save/rel", param, function (ret) {
                hotUtil.loading.close();
                if (ret.resultCode === 2000) {
                    hot.tip.success("设置成功", "", "success");
                    $('#addRolePowerModal').modal('hide');
                }
                else {
                    hot.tip.error("设置失败", "", "error")
                }
            });
        }
        ,
    }
</script>
</body>
</html>
